<template>
  <div>
    <div id="mainkpg">
    </div>
  </div>

</template>

<script>
  export default{
    props:['datak'],
    data(){
      return{
        tabledata:[],

        tabledatayb:[],//离枕时间
        tabledataya:[],//x轴参数
        tabledataca:[],//这个是深睡眠的y轴参数
        tabledatacb:[],//这个是浅睡眠的y轴参数
        tabledatacc:[],//这个是REM的y轴参数
        tabledatacd:[],//这个是清醒的y轴参数
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        console.log(that.datak)
        that.tabledata=that.datak;
        let ap=that.tabledata;
        for(var i=0;i<ap.length;i++){

          if(ap[i].type=='深睡眠'){
            for(var j=0;j<ap[i].value.length;j++){
              that.tabledataca.push(ap[i].value[j].ya);//这是y轴参数
              that.tabledataya.push(ap[i].value[j].yb)//这是x轴数据
              if(ap[i].value[j].yc==='0'){
                that.tabledatayb.push('-')//这是离枕时间等于0时要改成"-";
              }else{
                that.tabledatayb.push(ap[i].value[j].yc)
              }
            }
          }
          else if(ap[i].type=='浅睡眠'){
            for(var j=0;j<ap[i].value.length;j++){
              that.tabledatacb.push(ap[i].value[j].ya);
            }
          }
          else if(ap[i].type=='REM'){
            for(var j=0;j<ap[i].value.length;j++){
              that.tabledatacc.push(ap[i].value[j].ya);
            }
          }
          else if(ap[i].type=='清醒'){
            for(var j=0;j<ap[i].value.length;j++){
              that.tabledatacd.push(ap[i].value[j].ya);
            }
          }
        }


      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

        // 基于准备好的dom，初始化echarts实例,采用svg渲染
        var myChart = this.$echarts.init(document.getElementById('mainkpg'),null, {renderer: 'svg'});

        // 绘制图表,注意有值为0要判断改为’-‘
        var data = this.tabledatayc;
        var titlename = this.tabledataya;
        var dataH = this.tabledatayb;

        //markPoint-------根据data值决定标注位置
        var markdata=[];//用于标注的值
        for(var i=0;i<dataH.length;i++){
          var markdatals={
            xAxis:"", yAxis:""
          }
          if(dataH[i]!='-'){
            console.log(i)
            markdatals.xAxis=i;
            markdatals.yAxis=parseInt(dataH[i])+this.remToPx(0.06);
            markdata.push(markdatals);
          }
        }
        // -------结束

        var option = {
          calculable:false,

          grid: {
            left: this.remToPx(0.3),
            top: '20%',
            right: this.remToPx(0.3),
            bottom: '15%',
            containLabel:false,
          },
          legend: {
            data: ['深睡眠', '浅睡眠','清醒', 'REM',],
            top: "0",
            itemGap:this.remToPx(0.4),
            itemWidth:this.remToPx(0.2),
            itemHeight:this.remToPx(0.12),
            borderRadius:this.remToPx(0.04),
            borderWidth:this.remToPx(0.01),
            textStyle: {
              color: "#ffffff",
              fontSize:this.remToPx(0.28),
            }
            // align: 'left',
            // left: 10
          },
          backgroundColor: '#0f2e6f',
          dataZoom: [
            {
              type: 'inside',
              throttle:'50',
              minValueSpan:4,
              start: 0,
              end: 15
            }
          ],
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: this.tabledataya,
            axisLabel: {
              textStyle: {
                color:'#5c79b5',
                fontSize:this.remToPx(0.28),
              },
              margin:this.remToPx(0.15),
            },

            axisLine:{
              lineStyle:{
                color:"#000000",
              }
            },
            axisTick:{
              alignWithLabel :true,
            },
            triggerEvent:false,


          },
          yAxis: [
            {
              type: 'value',
              show: false
            }
          ],
          series: [
            {
              name: '清醒',
              type: 'bar',
              data:this.tabledatacd ,
              barWidth :this.remToPx(0.2),
              itemStyle: {
                normal: {
                  color:"#e7ff05",
                  barBorderRadius: this.remToPx(0.8),
                }
              },
            },
            {
              name: 'REM',
              type: 'bar',
              data:this.tabledatacc ,
              barWidth :this.remToPx(0.2),
              itemStyle: {
                normal: {
                  color:"#98c1a3",
                  barBorderRadius: this.remToPx(0.8),
                }
              },
            },
            {
              name: '深睡眠',
              type: 'bar',
              data:this.tabledataca ,
              barWidth :this.remToPx(0.2),
              itemStyle: {
                normal: {
                  color:"#e75254",
                  barBorderRadius: this.remToPx(0.8),
                }
              },
            },
            {
              name: '浅睡眠',
              type: 'bar',
              data:this.tabledatacb ,
              barWidth :this.remToPx(0.2),
              itemStyle: {
                normal: {
                  color:"#f4a17f",
                  barBorderRadius: this.remToPx(0.8),
                }
              },
            },
            {
              name: '离枕时间',
              type: 'bar',
              data: this.tabledatayb,
              barWidth :this.remToPx(0.05),
              barGap:"30%",
              itemStyle: {
                normal: {
                  color:"#0f2e6f",
                  borderColor:"#33d0e9",
                  borderWidth :this.remToPx(0.03),

                }
              },
              label: {
                normal: {
                  show: true,
                  formatter:'{c}分钟',
                  color: '#265fec',
                  fontSize:this.remToPx(0.22),
                  borderWidth: this.remToPx(0.1),
                  distance: this.remToPx(0.30),
                  align: 'center',
                  verticalAlign: 'middle',
                  borderRadius: 1,
                  borderColor: '#E8A61F',
                  backgroundColor: '#E8A61F',
                  position: 'top',
                },
              },
              markPoint:{
                symbol:"image://http://106.54.96.192/goodSleep/images/index_lz.png",
                symbolSize:this.remToPx(0.3),
                data :markdata,
                itemStyle :{
                  opacity:0.9,
                  color:'#ffffff'
                },

              },
            },



          ],
          animationEasing: 'elasticOut',
          animationEasingUpdate: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 20;
          },
          animationDelayUpdate: function (idx) {
            return idx * 20;
          }
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<style>
  #mainkpg{
    width:100%;height:3.2rem;float:left;
    /*margin-top: 0.2rem;*/
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>

